<template>
    <div class="book-detail f f-ac f-col">
        <Breadcrumb router />
        <div class="book-detail-body">
            <Title :label="`${title}/目录`" :time="createtime" />
            <div class="f f-w f-jb mt-20">
                <div class="book-item line-1 mb-30" v-for="(book, index) in detail.list" :key="index"
                    :title="book.directory" @click="handleBook(book)">
                    {{ book.directory }}
                </div>
            </div>
            <Page-tool :page="currentPage" @change-page="changePage" />
        </div>
    </div>
</template>

<script>
    import {
        bookDirectory
    } from "@/utils/book/index.js";
    export default {
        data() {
            return {
                currentPage: 1,
                detail: {},
                id: '',
                title: '',
                createtime: '',
            };
        },
        created() {
            this.title = this.$route.query.title
            this.id = this.$route.query.id
            this.createtime = this.$route.query.createtime
            this.getDetails(this.id);
        },

        methods: {
            // 获取目录
            getDetails(id) {
                let that = this
                bookDirectory({
                    book_lists_id: id,
                    page: that.currentPage,
                    limit: 40
                }).then((response) => {
                    that.detail = response.data
                });
            },
            // 跳转到阅读页面
            handleBook(val) {
                this.$router.push({
                    path: "/readBook/article",
                    query: {
                        id: val.id,
                        num:val.num,
                        count:this.detail.count
                    },
                });
            },
            // 切换页数
            changePage(page) {
                this.currentPage = page;
                this.getList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .book-detail {
        width: 100%;

        &-body {
            width: 1200px;
            padding: 30px 0;
            box-sizing: border-box;

            .book-item {
                width: 400px;
                color: #313131;
                font-size: 14px;

                &:hover {
                    cursor: pointer;
                    color: #0b4bb7;
                }
            }
        }
    }
</style>